<template>
	<div>
	  <el-card class="box-card">
		<template #header>
		  <div class="card-header">
			<span>造价计算</span>
			<el-button class="button" text @click.stop="openDetail">{{ showDetail ? '收起' : '查看详情' }}</el-button>
		  </div>
		</template>
		<div class="text item">
		  <div class="chart-container">
			<svg viewBox="0 0 36 36" class="circular-chart blue">
			  <defs>
				<linearGradient id="gradient" x1="1" y1="0" x2="0" y2="1">
				  <stop offset="0%" stop-color="#3e98c7"/>
				  <stop offset="100%" stop-color="#ff6a00"/>
				</linearGradient>
			  </defs>
			  <path class="circle-bg"
					d="M18 2.0845
					   a 15.9155 15.9155 0 0 1 0 31.831
					   a 15.9155 15.9155 0 0 1 0 -31.831"/>
			  <path class="circle"
					stroke-dasharray="75, 100"
					d="M18 2.0845
					   a 15.9155 15.9155 0 0 1 0 31.831
					   a 15.9155 15.9155 0 0 1 0 -31.831"
					stroke="url(#gradient)"/>
			  <text x="18" y="16" class="percentage">当前造价</text>
			  <text x="18" y="22" class="percentage">{{ cost.esdc || 0 }} 万元</text>
			</svg>
		  </div>
		</div>
	  </el-card>
	  <transition name="expand">
		<div v-if="showDetail" class="detail-content">
		  <el-descriptions title="项目成本详情" :column="1" border>
			<el-descriptions-item label="项目ID">{{ cost.projectId }}</el-descriptions-item>
			<el-descriptions-item label="工期(单位:人月)">{{ cost.e }}</el-descriptions-item>
			<el-descriptions-item label="风险因子">{{ cost.rsk }}</el-descriptions-item>
			<el-descriptions-item label="质量因子">{{ cost.q }}</el-descriptions-item>
		  </el-descriptions>
		  <el-divider></el-divider>
		  <p>收入基准：</p>
		  <el-select v-model="cost.f" placeholder="选择收入基准" style="width: 240px">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
		  </el-select>
		  <el-divider></el-divider>
		  <p>非人力直接成本：</p>
		  <el-input v-model="cost.dnc" style="width: 240px" placeholder="请输入" />
		  <el-divider></el-divider>
		  <el-button @click="updateEDSC" type="primary">提交</el-button>
		  <el-button @click="closeDetail" class="close-button" type="primary" size="large">关闭</el-button>
		</div>
	  </transition>
	</div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import { currentProjectTask } from './Variables/costVariables';
  import { getRskInfo } from '../../api/Cost/rskApi';
  import { getPdrInfo} from '../../api/Cost/pdrApi';
  import { getSwfInfo } from '../../api/Cost/swfApi';
  import { getRdfInfo } from '../../api/Cost/rdfApi';
  import { updateCostInfo, getWorkload, getQR, getBenchmark, getCostInfo,generateReport } from '../../api/Cost/costApi';
  import { ElLoading } from 'element-plus';
  
  
  const loadingInstance = ref<any>(null); // 用于存储加载提示实例
  
  const cost = ref({
	projectId: currentProjectTask.projectId,
	e: 0.0,
	f: 0.0,
	rsk: 0.0,
	q: 0.0,
	dnc: 0.0,
	esdc: null
  });
  
  const workload = ref({
	s: 0,
	pdr: 0.0,
	swf: 0.0,
	rdf: 0.0
  });
  
  const options = ref([]);
  
  const getCost = async () => {
	const res = await getCostInfo(currentProjectTask.projectId);
	cost.value = res;
  };
  
  const getOptions = async () => {
	const options_res = await getBenchmark();
	options.value = options_res;
  };
  
  const getRskValue = async () => {
	const res = await getRskInfo(currentProjectTask.projectId);
	cost.value.rsk = res.rskFactor;
  };
  
  const getE = async () => {
	workload.value.s = 514;
	const pdr_res = await getPdrInfo(currentProjectTask.projectId);
	workload.value.pdr = pdr_res.pdr_data.pdr;
	const swf_res = await getSwfInfo(currentProjectTask.projectId);
	workload.value.swf = swf_res.swf_data.swf;
	const rdf_res = await getRdfInfo(currentProjectTask.projectId);
	workload.value.rdf = rdf_res.rdf;
	const E_res = await getWorkload(workload.value.s, workload.value.pdr, workload.value.swf, workload.value.rdf);
	cost.value.e = E_res;
  };
  
  const getQ = async () => {
	const res = await getQR(currentProjectTask.projectId);
	cost.value.q = res;
  };
  
const updateEDSC = async () => {
	  // 在开始长时间操作前显示加载动画
	  
	
	  try {
		loadingInstance.value = ElLoading.service({
		    lock: true,
		    text: "正在上传并生成报告",
		    background: "rgba(0, 0, 0, 0.7)",
		  });
		await updateCostInfo(cost.value);
		await generateReport(currentProjectTask.projectId);
	  } catch (error) {
		console.error('An error occurred:', error);
	  } finally {
		// 无论操作是否成功，最后都要关闭加载动画
		loadingInstance.value.close();
		closeDetail();
	  }
	  
	};
  
  const setup = async() => {
	await getCost();
	await getRskValue();
	await getE();
	await getQ();
	await getOptions();
  };
  
  setup();
  
  const showDetail = ref(false);
  
  const openDetail = async() => {
	await setup();
	showDetail.value = true;
  };
  
  const closeDetail = () => {
	showDetail.value = false;
  };
  
  onMounted(() => {
	const updateChart = () => {
	  const circle = document.querySelector('.circle');
	  const percentage = cost.value.esdc / 100 * 75; // 假设满分为100万元
	  circle?.setAttribute('stroke-dasharray', `${percentage}, 100`);
	};
  
	watch(() => cost.value.esdc, () => {
	  updateChart();
	});
  
	updateChart();
  });
  </script>
  
  <style scoped>
  .box-card {
	background-color: #d7f39e5b;
	border: 1px solid #c4eda176;
	border-radius: 12px;
	padding: 20px;
	height: 260px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .box-card:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 25px;
	font-weight: bold;
  }
  
  .text {
	font-size: 16px;
	margin-top: 10px;
  }
  
  #loading-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    /* 其他样式，例如背景色、文字样式等 */
  }

  
  .detail-content {
	position: fixed;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	background-color: #fff;
	z-index: 1000;
	padding: 20px;
	overflow: auto;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	transform: scale(1);
	opacity: 1;
	transition: all 0.5s ease;
  }
  
  .expand-enter-active,
  .expand-leave-active {
	transition: all 0.5s ease;
  }
  
  .expand-enter,
  .expand-leave-to {
	transform: scale(0.8);
	opacity: 0;
  }
  
  .close-button {
	position: absolute;
	top: 20px;
	right: 20px;
  }
  
  .el-divider {
	margin: 20px 0;
  }
  
  .chart-container {
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .circular-chart {
	max-width: 100%;
	max-height: 150px;
	display: block;
	margin: 10px auto;
	margin-bottom: 20px;
  }
  
  .circular-chart .circle-bg {
	fill: none;
	stroke: #eee;
	stroke-width: 5;
  }
  
  .circular-chart .circle {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	animation: progress 1s ease-out forwards;
  }
  
  .circular-chart.blue .circle {
	stroke: url(#gradient);
  }
  
  .circular-chart .percentage {
	fill: #666;
	font-family: 'Arial';
	font-size: 0.2em;
	text-anchor: middle;
	dominant-baseline: middle;
  }
  
  @keyframes progress {
	0% {
	  stroke-dasharray: 0, 100;
	}
  }
  </style>
  